<!-- 佣金明细 -->
<template>
  <div class="commission">
    <div class="detail">
      <dt-header :title='title' :line-number="3" ref='header' />
    </div>
    
    <div class="handles">
      <div>
        <p v-if="info.settlementType === 'STANDARD'">本次结算总销总计：{{ $dt.tool.formatterMoney(info.settlementTotalSale) }}元</p>
        <p>实际结算佣金总计：{{ $dt.tool.formatterMoney(realCommission) }}元</p>
        <p @click="onAdjust">调整佣金：<span>{{ $dt.tool.formatterMoney(adjustCommission) }}元</span></p>
      </div>
      <div>
        <ButtonGroup>
          <Button type="primary" v-if="unlocking('0210020501')" @click="onDownload">导出Excel</Button>
        </ButtonGroup>
      </div>
    </div>
    
    <dt-grid ref="table" :list="filterList" @filter="onFilter" />
    
    <dt-loading :loading="loading" />
    <!-- 佣金调整 -->
    <commission-adjust ref="adjust" />
	</div>
</template>

<script>
  import commissionAdjust from './components/commission-adjust.vue'
  import Column from './opt/settlementColumn.js'
  import calcFun from './opt/calc.js'
  import detailOpt from './opt/detail.js'
  import settlementMgr from '@/biz/commission/settlement.js'

  export default {
    components: {
      commissionAdjust
    },
    data() {
      return {
        title: '',
        info: {},
        list: [],
        filterList: [],
        adjustCommission: '0',
        loading: false,
      }
    },
    mounted() {
      this.$refs.header.init(detailOpt.options(this, true), this.info)
      this.getDetail()
    },
    computed: {
      // 实际结算佣金总计 = 表格中「本次可结代理费」合计 + 调整佣金
      realCommission() {
        let sum = this.list.reduce((num, { actualAgentCost }) => {
          return num + Number(actualAgentCost)
        }, 0)
        return calcFun.dealPrecision(sum + Number(this.adjustCommission))
      }
    },
    methods: {
      getDetail() {
        this.loading = true
        settlementMgr.detail(this.$route.query.commissionId).then(res => {
          this.title = `${res.housesName} — ${res.commissionName} (${res.commissionMonth} ${this.$dt.dictInfo().__value('settlementType', res.settlementType)})`
          this.info = res
          this.$refs.header.init(detailOpt.options(this, true), this.info)
          this.adjustCommission = this.info.adjustAmount || 0
          this.$refs.table.init(this, new Column(res.settlementType, this.info, this.onBlur))
          this.list = res.settlementDetails || []
          this.filterList = res.settlementDetails || []
          this.loading = false
        })
      },
      onFilter(data) {
        this.filterList = settlementMgr.filterData(this.list, data)
      },
      // 佣金调整
      onAdjust() {
        this.$refs.adjust.show()
      },
      // 导出Excel
      onDownload() {
        settlementMgr.download(this.$route.query.commissionId).then(res => {
          const a = document.createElement('a')
          const blob = new Blob([res])
          const blobUrl = window.URL.createObjectURL(blob)
          a.download = `${this.info.housesName}-${this.info.commissionMonth}.xls`
          a.href = blobUrl
          a.click()
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .commission {
    padding: 20px;
  }
  
  .detail {
    padding: 10px 10px 0;
    background-color: #F8F8FF;
    border-radius: 2px;
  }
  
  .handles {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > div {
      display: flex;
      > p + p {
        margin-left: 24px;
      }
      span {
        color: #4876FF;
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }
</style>
